<template>
  <div :class="['search-box',{'bg-liner': bg},{'contain_h':isHome}]">
    <div class="item-content">
      <img class="serach-logo" src="../assets/home_logo.png" alt="中国招标采购网" />
      <div class="station" v-if="isHome">
        <img src="../assets/h_station.png" alt="中国招标采购网" />
      </div>
      <div class="input-box">
        <el-input
          class="input-content"
          type="text"
          placeholder="输入关键词 多个关键词用空格隔开"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </el-input>
        <div class="search-text">
          热搜词： 服装 床上用品 窗帘 医院 工作 布草 校服
        </div>
        <div class="high_search" v-if="isHome" @click="goSearch">
          <img src="../assets/high_search.png" alt="">          
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    bg:{
      type: Boolean,
      default: true
    },
    isHome:{
      type: String,
      default: ''
    },
    // search:{
    //   type: Boolean,
    //   default: false
    // }
  },
  methods: {
    handleSearch() {},
    goSearch() {
      this.$router.push("/search");
    },
  },
};
</script>
<style scoped >
.search-box {
  width: 100%;
  height: 150px;
}
.item-content {
  position: relative;
}
.serach-logo {
  width: 158px;
  height: 40px;
  position: absolute;
  top: 55px;
  left: 0px;
}
.input-box {
  position: absolute;
  top: 50px;
  left: 336px;
}
.input-content {
  width: 534px;
  height: 40px;
}
/deep/.input-content .el-input__inner {
  height: 40px;
}

/deep/.el-icon-search {
  font-size: 24px;
  padding: 8px 21px;
}
.search-text {
  color: #fff;
  font-size: 14px;
  margin-top: 7px;
}
.high_search{
  position: absolute;
  right: -108px;
  top: 4px;
  line-height: 1;
  border-left: 1px solid #B8B8B8;
  padding-left: 9px;
}
.high_search img{
  cursor: pointer;
    width: 70px;
}

/* 首页样式容器 */
/* .contain_h{
  width: 980px;
  background: #fff;
  margin: auto;
} */
.contain_h .input-box{
  left: 275px;
}
.contain_h .station{
  position: absolute;
  top: 62px;
  left: 170px;
}
.contain_h .station img{
  width: 77px;
}
.contain_h .search-text{
  font-size: 12px;
  color:#4B4B4B
}
/* 首页样式容器 end */
</style>